<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">设备总数 -- 共:{{sumCount}}/个</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_business"></div>
        </div> 
      </div> 
    </div> 
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "business",
  data() {
    return {
      timer: null,
      sumCount: '',
      tableData: [],
    }
  },
  props: {
    time: {
      type: Number,
      default: 60000
    },
  },
  mounted() {
    this.getData();
    if(this.timer){
      clearInterval(this.timer)
    }else{
      this.timer=setInterval(()=>{
        this.getData()
      },this.time)
    }

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      console.log('tttt',this.time)
      const u = '/reception/bigScreen/queryDeviceCounts';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.sumCount =  res.data.data.sumCount;
          this.tableData =  res.data.data.deviceCount;
          this.getEchart();
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    getEchart() {
      // 实例化对象
      let myChart = echarts.init(document.getElementById('chart_business'));
      let cityList = [];
      let cityData = [];
      for(let i=0;i<this.tableData.length;i++){
        cityList.push(this.tableData[i].siteName)
        cityData.push(this.tableData[i].device)
      }

      let charts = { // 按顺序排列从大到小
        cityList: cityList,
        cityData: cityData
      }
      let color = ['rgba(14,109,236', 'rgba(19, 206, 102', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(81, 19, 206', 'rgba(255,168,17', 'rgba(218,111,227'];

      let lineY = [];
      for (let i = 0; i < charts.cityList.length; i++) {
        let data = {
          name: charts.cityList[i],
          color: color[(i%7)] + ')',
          value: cityData[i],
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: color[(i%7)] + ', 0.3)'
              }, {
                offset: 1,
                color: color[(i%7)] + ', 1)'
              }], false),
              barBorderRadius: 10
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        lineY.push(data)
      }  
      let showed = this.tableData && this.tableData.length ? false : true;
      // 指定配置和数据
      let option = {
        title: {
          show: showed, // 是否显示title
          text: '暂无数据',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 400
          },
        },
        color: color,
        tooltip: {
          trigger: 'item',
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        yAxis: [{
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 13
            },
          },
          data: cityList
        }, {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 13
            },
            formatter: (val) => {
              return `${val}`
            }
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: cityData.reverse()
        }],
        series: [{
          name: '',
          type: 'bar',
          zlevel: 2,
          barWidth: '10px',
          data: lineY,
          animationDuration: 1500,
          label: {
            normal: {
              color: '#b3ccf8',
              show: false,
              position: [0, '-15px'],
              textStyle: {
                fontSize: 13
              },
              formatter: (a, b) => {
                return a.name;
              }
            }
          }
        }]
      };

      // 把配置给实例对象
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  }
};
</script>

<style lang="less" scoped>
.chartsdom {
    width: 100%;
    height: 95%;
  }
</style>
